'use strict'

// promise
;(function () {
    let o = {}
    const oProvince = $('#province')
    const oCity = $('#city')
    const oArea = $('#area')
    const ROOT_PATH = 'https://www.easy-mock.com/mock/5b0bbc3457fbcf7910d25388/promise'

    // 接口
    const API = {
        PROVINCE: `${ROOT_PATH}/province`,
        CITY: `${ROOT_PATH}/city`,
        AREA: `${ROOT_PATH}/area`
    }

    // 数据缓存
    let cacheData = {
        province: [],
        city: [],
        area: []
    }

    // 创建dom模板
    o.createTemplate = data =>
        data.map(item => `<option value="${item.ID}">${item.Name}</option>`).join('')

    o.request = url =>
        new Promise((resolve, reject) => {
            $.ajax({
                url: url,
                type: 'get',
                success(res) {
                    resolve(res)
                },
                error(err) {
                    reject(err)
                }
            })
        })

    // 数据过滤
    o.filter = (data, id) => {
        let arr = []
        data.map(item => {
            if (item.ParentId === id) {
                arr.push(item)
            }
        })
        return arr
    }

    // 初始化
    o.init = () => {
        o.request(API.PROVINCE)
            .then(res => {
                cacheData.province = res.data
                oProvince.html(o.createTemplate(res.data))
                return o.request(API.CITY)
            })
            .then(res => {
                cacheData.city = res.data
                const filteredData = o.filter(res.data, $('#province').val())
                oCity.html(o.createTemplate(filteredData))
                return o.request(API.AREA)
            })
            .then(res => {
                cacheData.area = res.data
                const filteredData = o.filter(res.data, $('#city').val())
                oArea.html(o.createTemplate(filteredData))
            }).catch(err => {
                console.error(err)
                alert('获取数据错误')
            })

        // Promise.all()
        // Promise.all([o.request(API.PROVINCE), o.request(API.CITY), o.request(API.AREA)])
        //     .then(res => {
        //         cacheData.province = res[0].data
        //         cacheData.city = res[1].data
        //         cacheData.area = res[2].data
        //         oProvince.html(o.createTemplate(res[0].data))
        //         const filteredCity = o.filter(cacheData.city, $('#province').val())
        //         oCity.html(o.createTemplate(filteredCity))
        //         const filteredArea = o.filter(cacheData.area, $('#city').val())
        //         oArea.html(o.createTemplate(filteredArea))
        //     }).catch(err => {
        //         console.error(err)
        //         alert('获取数据错误')
        //     })

        oProvince.on('change', () => {
            const filteredData = o.filter(cacheData.city, $('#province').val())
            oCity.html(o.createTemplate(filteredData))
        })

        oCity.on('change', () => {
            const filteredData = o.filter(cacheData.area, $('#city').val())
            oArea.html(o.createTemplate(filteredData))
        })
    }

    window.multiSelector1 = o.init
})()

// 使用async函数
;(function () {
    let o = {}
    const oProvince = $('#province')
    const oCity = $('#city')
    const oArea = $('#area')
    const ROOT_PATH = 'https://www.easy-mock.com/mock/5b0bbc3457fbcf7910d25388/promise'
    const API = {
        PROVINCE: `${ROOT_PATH}/province`,
        CITY: `${ROOT_PATH}/city`,
        AREA: `${ROOT_PATH}/area`
    }
    let cacheData = {
        province: [],
        city: [],
        area: []
    }
    o.createTemplate = data =>
        data.map(item => `<option value="${item.ID}">${item.Name}</option>`).join('')

    o.request = url =>
        new Promise((resolve, reject) => {
            $.ajax({
                url: url,
                type: 'get',
                success(res) {
                    resolve(res)
                },
                error(err) {
                    reject(err)
                }
            })
        })

    o.filter = (data, id) => {
        let arr = []
        data.map(item => {
            if (item.ParentId === id) {
                arr.push(item)
            }
        })
        return arr
    }

    o.init = async () => {
        let province, city, area
        try {
            province = await o.request(API.PROVINCE)
            city = await o.request(API.CITY)
            area = await o.request(API.AREA)
        } catch(err) {
            console.error(err)
        }
        cacheData.province = province.data
        cacheData.city = city.data
        cacheData.area = area.data
        oProvince.html(o.createTemplate(cacheData.province))
        const filteredCity = o.filter(cacheData.city, $('#province').val())
        oCity.html(o.createTemplate(filteredCity))
        const filteredArea = o.filter(cacheData.area, $('#city').val())
        oArea.html(o.createTemplate(filteredArea))


        oProvince.on('change', () => {
            const filteredData = o.filter(cacheData.city, $('#province').val())
            oCity.html(o.createTemplate(filteredData))
        })

        oCity.on('change', () => {
            const filteredData = o.filter(cacheData.area, $('#city').val())
            oArea.html(o.createTemplate(filteredData))
        })
    }

    window.multiSelector2 = o.init
})()

multiSelector1()